Ext.namespace("ca.magex.gps");

ca.magex.gps.TrackpointMapPanel = function(config) {
	
	var t = this;
	
	Ext.apply(this, config);

	
    ca.magex.gps.TrackpointMapPanel.superclass.constructor.call(this, {
		html: '<div id="chartdiv">Chart</div>',
    });

	this.on('render', function(comp) {
		
	});
	
	this.on('resize', function(comp, adjWidth, adjHeight, rawWidth, rawHeight) {

	});

	var drawChart = function(o) {
		var doc = o.responseXML;

		var xml = "<graph caption='Gatineau Park Trip' xAxisName='Distance' yAxisName='Elevation' yAxisMinValue='50' showNames='0' showValues='0' rotateNames='0' showColumnShadow='1' animation='1' showAlternateHGridColor='1' AlternateHGridColor='ff5904' divLineColor='ff5904' divLineAlpha='20' alternateHGridAlpha='5' canvasBorderColor='666666' baseFontColor='666666'>";
		var points = doc.getElementsByTagName("Point");
		for (var i = 0; i < points.length; i++) {
			var point = points[i];
			xml += "<set name='" + point.getAttribute("dist") + "' value='" + point.getAttribute("alt") + "' hoverText='" + point.getAttribute("tstamp") + "'/>";
		}
		xml += "</graph>"
			
		var chart = new FusionCharts("fusioncharts/charts/FCF_Line.swf", "ChartId", this.getInnerWidth(), this.getInnerHeight());
		chart.setDataXML(xml);
		chart.render("chartdiv");
	}

	this.load = function(query, end) {
		Ext.Ajax.request({
			url: 'php/gpsquery.php',
			method: 'post',
			success: drawChart,
			params: {
				q: query,
				l: 1000
			}
		});
	}

};

Ext.extend(ca.magex.gps.TrackpointMapPanel, Ext.Panel);
